import React, { Component } from 'react';
import PropTypes from 'prop-types';
import FoundationSymbol from '@icedesign/foundation-symbol';
import { Transfer } from '@alifd/next';

import './TransferTable.scss';

export default class TransferTable extends Component {
    static displayName = 'TransferTable';

    static defaultProps = {
        defaultValue: [],
        dataSource: [],
      };

    static propTypes = {
        defaultValue: PropTypes.array.isRequired, //非受控初始值
        dataSource: PropTypes.array.isRequired,  //数据源
        handleTransfer: PropTypes.func.isRequired,  //编辑显示字段事件
        handleChange: PropTypes.func.isRequired,    //选中数据切换事件
        restoreDefault: PropTypes.func.isRequired,  //恢复默认
        saveTransferSet: PropTypes.func.isRequired, //保存设置
    };

    constructor(props) {
        super(props);
    }

    render() {
        const { 
            defaultValue, 
            dataSource, 
            handleTransfer, 
            handleChange, 
            restoreDefault, 
            saveTransferSet 
        } = this.props;
        
        return (
            <div className="show-transfer">
                <div className="transfer-content">
                <div className="title">
                    <span>编辑显示字段</span>
                    <FoundationSymbol size="small" type={'cross'} onClick={handleTransfer}/>
                </div>
                <Transfer defaultValue={defaultValue} dataSource={dataSource} onChange={handleChange} titles={['不显示字段', '显示字段']} />
                <div className="transfer-footer">
                    <div className="dialog-footer">
                    <section className="nb-button-wrapper large" style={{backgroundColor: 'rgb(217, 217, 217)'}} onClick={restoreDefault}>恢复默认</section>
                    <section className="nb-button-wrapper large" style={{backgroundColor: 'rgb(52, 151, 255)'}} onClick={saveTransferSet}>保存设置</section>
                    </div>
                </div>
                </div>
            </div>
        )
    }
}